<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <!-- 进入路由文件 -->
    <script src="../lib/vue.js"></script>
    <!-- VueRouter -->
    <script src="../lib/vue-router.js"></script>
    <link rel="stylesheet" href="../lib/animate.css">
    <script src="http://47.104.209.44/base/js/jquery-1.10.1.min.js"></script>
    <style>
        .router-link-exact-active,
        .router-link-active {
            padding: 10px;
            background: darkorchid;
            color: #fff;
            font-size: 20px;
            border-radius: 10px;
        }

        .box {
            width: 70%;
            min-height: 350px;
            border: 1px solid #000;
            border-radius: 10px;
        }

        .avatar {
            width: 50px;
            height: 50px;
            border-radius: 50%;
        }
    </style>
</head>

<body>
    <div id="app">
        <h2>{{title }}</h2>
        <my-head></my-head>
        <hr>
        <!-- 5.路由出口  告诉Vue在哪里渲染当前激活的路由组件  -->
        <div class="box">
            <keep-alive>
                <router-view></router-view>
            </keep-alive>
        </div>
        <!-- 6. 路由导航  a  声明式导航 -->

    </div>

    <template id="main">
        <div>
            <h2> 微信主路由配置 </h2>
            <hr>
            <div>
                <router-view></router-view>
            </div>
            <hr>
            <myfoot></myfoot>
        </div>
    </template>
    <template id="notfound">
        <div>
            <h2> notfound - notfound - 404 </h2>
        </div>
    </template>
    <template id="wechat">
        <div>
            <h2>wechat - wechat - 聊天</h2>
        </div>
    </template>
    <template id="contact">
        <div>
            <h2>contact - contact - 通讯录</h2>
            <hr>
            <ul>
                <li v-for="(l,i) in list" :key="i">
                    <router-link :to="{name:'detail',query:{name:l.name}}">
                        {{l.name}}
                        <img :src="l.picUrl" alt="" class="avatar">
                    </router-link>
                </li>
            </ul>
        </div>
    </template>
    <template id="find">
        <div>
            <h2>find - find - 发现</h2>
        </div>
    </template>
    <template id="mine">
        <div>
            <h2>mine - mine - 我的</h2>
        </div>
    </template>
    <template id="foot">
        <footer>
            <router-link :to="{name:l.name}" v-for="(l,i) in ftlist" :key="i">
                {{l.text}}
            </router-link>
        </footer>
    </template>
    <template id="detail">
        <div>
            <h2>Detail - Detail 我的好友 <button @click="$router.go(-1)">返回</button></h2>
            <h1>name ==== {{$route.query.name }}</h1>
        </div>
    </template>
    <script>
        // 0. 如果使用模块化机制编程，导入Vue和VueRouter，要调用 Vue.use(VueRouter)
        Vue.component("MyHead", {
            template: "<h2>Head - Head - Head - wh2112 </h2>"
        })
        // 1.  定义 (路由) 组件选项对象
        const App = {
            template: "#main"
        }

        const Wechat = {
            template: "#wechat"
        }
        const Contact = {
            template: "#contact",
            data() {
                return {
                    list: []
                }
            },
            mounted() {
                $.ajax({
                    url: "http://47.104.209.44:3333/artist/list",
                    type: "GET",
                    datType: "json",
                    success: res => {
                        console.log(res)
                        this.list = res.artists
                    }
                })
            }
        }
        const Find = {
            template: "#find"
        }
        const Mine = {
            template: "#mine",
            beforeRouteEnter(to, from, next) {
                next()
                console.log("Mine - beforeRouteEnter 进入路由组件之前 获取不到 this ")
            },
            beforeRouteUpdate(to, from, next) {
                next()
                console.log("Mine - beforeRouteUpdate 路由组件更新之前")
            },
            beforeRouteLeave(to, from, next) {
                console.log("Mine - beforeRouteLeave 离开路由组件之前")
                next()

            }
        }
        const NotFound = {
            template: "#notfound"
        }

        const Detail = {
            template: "#detail"
        }

        Vue.component("myfoot", {
            template: "#foot",
            data() {
                return {
                    ftlist: [
                        { path: '/wechat', name: 'wechat', text: "首页", icon: "" },
                        { path: '/contact', name: 'contact', text: "通讯录", icon: "" },
                        { path: '/find', name: 'find', text: "发现", icon: "" },
                        { path: '/mine', name: 'mine', text: "我的", icon: "" },
                    ]
                }
            }
        })
        // 2. 定义路由
        // 每个路由应该映射一个组件。 path 和 component 的对应关系 
        const routes = [
            {
                path: "/",
                redirect: {
                    name: 'app'
                }
            },
            {
                path: "/app",
                name: "app",
                component: App,
                redirect: "/wechat",  // 默认打开子路由  
                children: [   // 接收子路由 router-view 
                    { path: '/wechat', name: 'wechat', component: Wechat },
                    { path: '/contact', name: 'contact', component: Contact },
                    { path: '/find', name: 'find', component: Find },
                    { path: '/mine', name: 'mine', component: Mine },
                ]
            },
            {
                path: "/detail",
                name: 'detail',
                component: Detail,
                beforeEnter(to, from, next) {
                    alert("欢迎进入艺人详情")
                    next(true)
                }
            },
            {
                path: "/404",
                name: "notFound",
                component: NotFound
            },
            {
                path: "*",
                redirect: { name: "notFound" }
            }
        ]

        // 3. 创建路由对象 
        const router = new VueRouter({
            routes,
            mode: "hash",
            base: "",
            scrollBehavior(to, from, savedPosition) {
                // return 期望滚动到哪个的位置
                // return 0 
                return savedPosition;
            }
        })
        // 全局守卫
        router.beforeEach((to, from, next) => {
            console.log("全局前置守卫 - beforeEach ")
            next()
        })
        router.afterEach((to, from) => {
            console.log("afterEach -  afterEach 已经进入了当前路由")
        })
        // 4. 挂载到根实例                  
        // 根实例
        const vm = new Vue({
            // 4. 把路由挂载到根实例
            // this.$router 
            router,
            data: {
                title: "Vue 路由  嵌套路由(微信路由) ",
                tname: "Laowang",
                tban: 2115
            },
            watch: {
                '$route': function (to, from) {
                    console.log(to)  // to 表示进入的路由
                    console.log(from) // from 表示离开的路由 
                }
            },
            mounted() {
                document.querySelectorAll("title")[0].innerHTML = this.title;
                console.log(this.$router)  // 路由对象  负责路由跳转 路由导航
                console.log(this.$route)   // 路由信息对象   获取当前正激活的路由信息(路由参数)
            }
        }).$mount("#app")
    </script>
    <!-- 
     
        嵌套路由  路由嵌套组件  
        你有多少层嵌套就写多少个 router-view

        配置简单 路由 

        路由守卫   阻止你进入或者离开当前路由 

        用来判断时候可以进入或者离开当前路由  

        路由导航守卫    分三种   
        a.  全局前置守卫  router.beforeEach(to,from,next)
            全局后置守卫  router.afterEach(to,from)

        b.  路由独享的守卫  beforeEnter(to,from,next)  进入当前路由之前触发 

        c.  路由组件内直接定义以下路由导航守卫  component
            beforeRouteEnter    进入这个组件之前
            beforeRouteUpdate   组件数据更新  
            beforeRouteLeave    离开这个组件之前  
  -->

</body>

</html>